<template>
<div id="personal-center">
    <div id="personal-center-tabs">
      <div style="width: 200px; background-color:#545c64; min-height: calc(100vh - 60px)">
        <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >

      <el-menu-item index="1">
        <i class="el-icon-user-solid"></i>
        <span slot="title"><router-link to="/personal-center/page">个人主页</router-link></span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-warning"></i>
    <span slot="title"><router-link to="/personal-center/pwmodi">修改密码</router-link></span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title"><router-link to="/personal-center/comment">我的评论</router-link></span>
      </el-menu-item>
      <el-menu-item index="4">

        <i class="el-icon-document"></i>
        <span slot="title"><router-link to="/personal-center/per-info">个人信息</router-link></span>
      </el-menu-item>

    </el-menu>
      </div>
    </div>
    <div id="personal-center-content">
      <router-view></router-view>
    </div>
</div>

</template>

<script>
export default{
    name: 'PersonalCenter',
}
</script>

<style scoped>
#personal-center{
    width: 100%;
}
#personal-center::after{
  display: block;
  content: '';
  clear: both;
}
#personal-center-tabs{
    width: 280px;
    display: inline-block;
    float: left;
}
#personal-center-content{
    width: 100px;
    display: inline-block;
    float: left;
    margin-left: 150px;
}
a{
  color: white;
}
</style>
